<template>
  <div class="manage_login">
    <h1 class="title">社会数-博客后台管理系统</h1>
    <el-form
      ref="login_form1"
      :label-position="labelPosition"
      label-width="80px"
      :model="loginform"
      :rules="login_rules"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="loginform.userName"
          @keyup.native.enter="onSubmit"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password"
          v-model="loginform.password"
          @keyup.native.enter="onSubmit"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即登录</el-button>
        <!-- <el-button>取消</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
/*导入登录api*/
import { manageLogin } from "@/request/api";
export default {
  name: "manegeLogin",
  data() {
    return {
      labelPosition: "right", //右对齐
      loginform: {
        userName: "admin",
        password: "123456",
      },
      login_rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      let _this = this;
      _this.$refs.login_form1.validate((valid) => {
        if (valid) {
          manageLogin(_this.loginform)
            .then((resp) => {
              if (resp.data.code == 2000) {
                console.log("resp.data",resp.data);
                localStorage.setItem(
                  "userinfo",
                  JSON.stringify(resp.data.data)
                );
                 localStorage.setItem(
                  "usertoken",
                  resp.data.token
                );
                _this.$message({ message: resp.data.msg, type: "success" });
                let obj = {
                  username: resp.data.data.userName,
                  flag: false,
                };
                _this.$emit("flagChange", obj); //传递给父组件
                _this.$router.push({
                  path: "/backStage/classlist",
                });
              } else if (resp.data.code == 2005) {
                _this.$message({ message: resp.data.msg, type: "error" });
              } else {
                _this.$message({ message: resp.data.msg, type: "warning" });
              }
            })
            .catch((err) => {
              _this.$message({ message: err, type: "error" });
            });
          //   console.log("验证成功",valid,"from",_this.loginform);
        } else {
          console.log("error not submit!");
          return;
        }
      });
    },
  },
};
</script>
<style scoped>
.title {
  color: #078cb1;
  margin-bottom: 50px;
}
.manage_login {
  width: 400px;
  text-align: center;
  margin: 0 auto;
  padding: 150px 0;
}
</style>